<script setup lang="ts">
import {reactive} from "vue";
import {useRouter} from "vue-router";
import {get} from "@/axios"
import {useTokenStore,useMenuStore} from "@/store";


const router = useRouter();
const tokenStore = useTokenStore();
const menuList = reactive([]);
const menuStore = useMenuStore();

if(tokenStore === "" || tokenStore === null){
  router.push('/login')
}else {
  get("/Menu/GetMenuList").then((res:any)=>{
    menuStore.menu.push(...res.data)
    menuList.push(...res.data)
  })
}

const handleOpen = async (key: string, keyPath: string[]) => {
  router.push({name:key})
}

const changePage = (e:any) =>{
  console.log(e.index)
  router.replace({name:e.index})
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="menu-container">
    <h5 class="mb-2 title">后台管理系统</h5>
    <el-menu
        default-active="仪表盘"
        text-color="#ffffff"
        background-color="#304156"
        class="el-menu-vertical"
        :unique-opened="true"
        :router="false"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-scrollbar height="850px">
        <div v-for="item in menuList" :key="item.id">
          <el-menu-item v-if="item.children.length == 0" :index="item.name">
            <el-icon color="#ffffff" :data="item.icon">
              <component size="18" :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
          <el-sub-menu v-if="item.children.length != 0" :index="item.name">
            <template #title>
              <el-icon color="#ffffff" :data="item.icon">
                <component size="18" :is="item.icon"></component>
              </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group v-for="m2 in item.children" :key="item.id">
              <el-menu-item :data="m2.name" :index="m2.name" @click="changePage">
                <el-icon color="#ffffff" :data="m2.icon">
                  <component size="18" :is="m2.icon"></component>
                </el-icon>
                {{ m2.name }}
              </el-menu-item>
            </el-menu-item-group>
            <el-sub-menu 
                v-if="item.children.children" 
                :index="item.children.children.name" 
                :data="item.children.children.name">
              <template #title>{{ item.children.children.name }}</template>
              <el-menu-item v-for="m3 in item.children.children" :index="m3.name" :key="item.id"  >
                <el-icon color="#ffffff" :data="m3.icon">
                  <component size="18" :is="m3.icon"></component>
                </el-icon>
                {{ m3.name }}
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </div>
      </el-scrollbar>
    </el-menu>
  </div>
</template>

<style scoped>
.el-menu-vertical{
  border: none;
}
.menu-container{
  color: #ffffff;
  background-color: #304156;
  width: 100%;
  height: 100%;
}
.title{
  font-size: 20px;
  text-align: center;
  margin: 0 0;
  padding: 10px 10px;
}
</style>
